<template>
  <div class="boxnove">
    <div
      :style="{
        background:
          bgnum == 0
            ? ''
            : bgnum == 1
            ? '#cad9e8'
            : bgnum == 2
            ? '#d1edd1'
            : bgnum == 3
            ? '#e6e6e6'
            : bgnum == 4
            ? '#1A1A1A'
            : '',
      }"
      :class="fas == 1 ? 'conss' : 'bg'"
    >
      <!-- 上弹出 -->
      <van-popup
        class="popuptop"
        v-model="show"
        :overlay="false"
        position="top"
        :style="{ height: '44px' }"
      >
        <div
          @click="$router.go(-1)"
          class="left iconfont icon-arrowRight-copy-copy"
        ></div>
        <div @click="collections" class="right iconfont icon-gengduosangedian"></div>
      </van-popup>
      <div v-show="vast" class="fication">
        <span style="padding:0px 5px " class="iconfont icon-wodeshujia"></span>
        <span v-show="coll" @click="collection">加入书架</span>
        <span v-show="!coll" @click="collec">已在书架</span>
      </div>
      <!-- 右弹出 -->
      <van-popup
        class="popupright"
        v-model="showright"
        position="right"
        :style="{ height: '100%' }"
      >
        <div class="chapterlists">
          <h3>{{ workdetails.title }}</h3>
          <div>共{{ chapterlists.length }}章</div>
          <div class="text">正文卷</div>
          <ul>
            <li
              @click="chapadd(index)"
              :style="{ color: item.fas == 1 ? '#bbb' : '' }"
              :class="chap - 1 == index ? 'con' : ''"
              v-for="(item, index) in chapterlists"
              :key="index"
            >
              {{ item.text }}
              <span v-show="item.fas == 1" class="iconfont icon-icon-"></span>
            </li>
          </ul>
        </div>
      </van-popup>
      <!-- 下弹出 -->
      <van-popup
        class="pupupbottom"
        v-model="show"
        :overlay="false"
        position="bottom"
        :style="{ height: '48px' }"
      >
        <div @click="showRight" class="item">
          <span class="iconfont icon-a-gengduofenlei"></span>
          <div>目录</div>
        </div>
        <div @click="showProgre" class="item">
          <span class="iconfont icon-jindutiao"></span>
          <div>进度</div>
        </div>
        <div @click="showSetup" class="item">
          <span class="iconfont icon-728bianjiqi_zitidaxiao"></span>
          <div>设置</div>
        </div>
        <div @click="yejian" class="item">
          <span class="iconfont icon-yejianmoshi"></span>
          <div v-show="flse">夜间</div>
          <div v-show="!flse">白天</div>
        </div>
      </van-popup>
      <!-- 进度条 -->
      <div v-show="progre" class="progress">
        <div class="top">
          <div @click="add" class="left">
            <span class="iconfont icon-arrowRight-copy-copy"></span>上一章
          </div>
          <div
            v-for="(item, index) in chapterlists.slice(chap - 1, chap)"
            :key="index"
            class="center"
          >
            {{ item.text }}
          </div>
          <div @click="next" class="right">
            下一章<span class="iconfont icon-arrowRight-copy-copy-copy"></span>
          </div>
        </div>
        <div class="bottom">
          <van-slider
            v-model="value"
            inactive-color="#514E4C"
            bar-height="4px"
            active-color="#ED424B"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
        </div>
      </div>
      <!-- 设置 -->
      <div v-show="setup" class="setups">
        <div class="top">
          <div @click="setadd" class="left">A -</div>
          <van-slider
            v-model="setvalue"
            inactive-color="#514E4C"
            bar-height="4px"
            active-color="#ED424B"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
          <div @click="setsnext" class="right">A +</div>
        </div>
        <div class="bottom">
          <ul>
            <li @click="bgnum = 0" :class="bgnum == 0 ? 'con' : ''">
              <span class="iconfont icon-tick" v-show="bgnum == 0"></span>
            </li>
            <li
              @click="bgnum = 1"
              :class="bgnum == 1 ? 'con' : ''"
              style="background: #cad9e8"
            >
              <span class="iconfont icon-tick" v-show="bgnum == 1"></span>
            </li>
            <li
              @click="bgnum = 2"
              :class="bgnum == 2 ? 'con' : ''"
              style="background: #d1edd1"
            >
              <span class="iconfont icon-tick" v-show="bgnum == 2"></span>
            </li>
            <li
              @click="bgnum = 3"
              :class="bgnum == 3 ? 'con' : ''"
              style="background: #e6e6e6"
            >
              <span class="iconfont icon-tick" v-show="bgnum == 3"></span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 头部 -->
      <div
        class="herave"
        :style="{
          background:
            bgnum == 0
              ? ''
              : bgnum == 1
              ? '#cad9e8'
              : bgnum == 2
              ? '#d1edd1'
              : bgnum == 3
              ? '#e6e6e6'
              : bgnum == 4
              ? '#1A1A1A'
              : '',
        }"
      >
        <h1
          v-for="(item, index) in chapterlists.slice(chap - 1, chap)"
          :key="index"
          :style="{ color: bgnum == 4 ? '#8D8D8D' : '' }"
        >
          {{ item.text }}
        </h1>
      </div>
      <!-- 章节列表 -->
      <div
        class="content"
        v-for="item in sublists.slice(chap - 1, chap)"
        :key="item.subid"
      >
        <h3
          @click="showPopup"
          :style="{
            'font-size': 24 + setvalue / 5 + 'px',
            color: bgnum == 4 ? '#8D8D8D' : '',
          }"
        >
          {{ item.chapter }}
        </h3>
        <p
          @click="showPopup"
          :style="{
            'font-size': 14 + setvalue / 5 + 'px',
            'line-height': 21 + setvalue / 2 + 'px',
            color: bgnum == 4 ? '#8D8D8D' : '',
          }"
          v-for="(v, i) in item.contentlists"
          :key="i"
        >
          {{ v }}
        </p>
        <div
          :style="{
            background:
              bgnum == 0
                ? ''
                : bgnum == 1
                ? '#cad9e8'
                : bgnum == 2
                ? '#d1edd1'
                : bgnum == 3
                ? '#e6e6e6'
                : bgnum == 4
                ? '#1A1A1A'
                : '',
          }"
          v-show="showFoot"
          class="footer"
        >
          <div class="left" @click="addchap">上一章</div>
          <div class="right" @click="nodechap">下一章</div>
        </div>
      </div>
      <!-- 购买章节 -->
      <div v-show="fas == 1" @click="showPopup" class="purchase">
        <div class="top"></div>
        <div class="bottom">
          <div class="recharge">
            <div class="price">
              价格 10 起点币，余额
              <span style="color: #ed424b">{{ currency }}</span> 起点币
            </div>
            <router-link
              tag="div"
              to="recharge"
              v-show="currency == 0"
              class="rech"
              >去充值</router-link
            >
            <div v-show="currency >= 10" @click="rech" class="rech">购买</div>
            <div @click="showRight" class="choosemore">选择更多章节</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
export default {
  data() {
    return {
      sublists: [
        {
          subid: 1,
          chapter: "第一章 精灵世界的穿越者", //小说章节
          contentlists: [
            "　　溪谷镇坐落于丰缘地区的东北部，位于茵郁市和水静市之间。",
            "　　这里四处环山，风景雄奇壮美、朝飞暮卷、百卉含英。",
            "　　好吧，其实溪谷镇就是一个普通的大山里的小镇而已。",
            "　　不过溪谷镇附近有着丰缘地区著名的旅游景点，喷火驼山丘、懒人獭香蕉乐园、丰缘自然保护区。",
            "　　得益于这三个著名景点，经过溪谷镇补给的旅行训练家络绎不绝。",
            "　　这些旅行训练家不仅解决了大部分溪谷镇镇民的生活来源问题，还解决了溪谷镇附近大量的安全隐患，大大的减少了护林员们的工作量。",
            "　　旅行训练家们真是一群可爱的人呢。",
            "*",
            "*",
            "*",
            "　　午后的阳光穿过一栋二层小楼的窗子，照亮了一位少年。",
            "　　少年在信纸上写到。",
            "　　我叫冬树，今年十一岁，家住溪谷镇，是一名穿越者，没有系统、没有父母双亡、没有妹妹、没有未婚妻。",
            "　　虽然看起来一点也不像主角模板，但是我一点也不慌。",
            "　　我可是口袋妖怪一至七代全部云通关，熟知所有稀有精灵以及神兽在游戏中的捕捉地点，还看过漫画特别篇，读过某点大量精灵文的精灵真爱粉。",
            "　　脑子里有这么多奇奇怪怪的精灵知识，如果还不能成功的话，我还是老老实实回来继承家业好了。",
            "　　还有未来会拥有那些精灵伙伴呢？",
            "　　真是期待啊！",
            "　　冬树放下笔，拿起这张写满秘密的信纸，趴在二楼卧室的窗边，用打火机点燃。",
            "　　看着眼前跳动的火苗，不由自主的又想起了曾经那个精彩万分的世界。",
            "　　网站上还关注的沙雕UP主，不知道有没有新的沙雕视频？",
            "　　书架里追的小说，是完本了还是TJ了？",
            "　　最新的剑盾还没有云通关呢，现在只剩下的深深的遗憾。",
            "　　他并不知道，没有云通关剑盾，便是老天对他的恩赐。",
            "　　突然他倒吸一口凉气，发出一声长嘶嘶嘶嘶嘶嘶嘶嘶嘶！",
            "　　原来是火苗烧到了他的手指！",
            "　　他赶紧把只烧剩一点的信纸丢出窗外，随风舞动的火苗不只为他带来了热辣的吻，也带走了他的回忆。",
            "　　看着火苗在空中燃尽，他整理好思绪，默默盘算，‘再有一个月我就满十二岁了，终于可以向联盟申请成为训练家，拥有自己的精灵伙伴了。’",
            "　　‘这将是一个新的开始！我要在精灵世界留下自己的名字！’",
            "　　冬树爸爸中田一夫的那粗犷喊声，从楼下传到并打断了他的思绪。",
            "　　“冬树，伊布玩偶和正电拍拍负电拍拍的组合玩偶卖完了，有时间记得再做几个。”",
            "　　“知道啦，爸爸。”冬树停下胡思乱想，回应到。",
            "　　“慢慢做就行，那我先回店里了哦。”随后楼下传来了关门声。",
            "　　‘又是平凡且温馨的一天啊。’",
            "　　他感慨着起身，来到储物室里取出石膏粉还有精灵玩偶模具盒。",
            "　　反正闲着也是闲着，有在那里回忆的时间还不如做几个精灵玩偶呢，毕竟回忆不能当饭恰。",
            "　　在后院，冬树熟练的把和好的黏土塞进精灵玩偶模具盒固定好，放在后院的阴凉处阴干。",
            "　　只要等黏土阴干之后，稍作修整，给黏土玩偶刷上几遍水和石膏粉，等石膏外壳彻底成型，再把颜色一上就大功告成了。",
            "　　什么？你说为什么不做全石膏的？那得多少石膏啊？",
            "　　虽然石膏不值钱，但是有更便宜的黏土谁还做全石膏的呀？现在不是流行节能减排，不对...开源节流嘛！",
            "　　等待阴干的时候他也没闲着，而是把摇椅搬到树荫处，躺在上面，悠哉悠哉的摇晃着纳凉。",
            "　　不知不觉中便接受了美梦神的召唤，进入了梦乡。",
            "　　。。。。。。",
            "　　穿越成一个婴儿时冬树是拒绝的。",
          ], //小说内容
        },
        {
          subid: 2,
          chapter: "第二章 怕死的穿越者不想冒险", //小说章节
          contentlists: [
            "　　溪谷镇坐落于丰缘地区的东北部，位于茵郁市和水静市之间。",
            "　　这里四处环山，风景雄奇壮美、朝飞暮卷、百卉含英。",
            "　　好吧，其实溪谷镇就是一个普通的大山里的小镇而已。",
            "　　不过溪谷镇附近有着丰缘地区著名的旅游景点，喷火驼山丘、懒人獭香蕉乐园、丰缘自然保护区。",
            "　　得益于这三个著名景点，经过溪谷镇补给的旅行训练家络绎不绝。",
            "　　这些旅行训练家不仅解决了大部分溪谷镇镇民的生活来源问题，还解决了溪谷镇附近大量的安全隐患，大大的减少了护林员们的工作量。",
            "　　旅行训练家们真是一群可爱的人呢。",
            "*",
            "*",
            "*",
            "　　午后的阳光穿过一栋二层小楼的窗子，照亮了一位少年。",
            "　　少年在信纸上写到。",
            "　　我叫冬树，今年十一岁，家住溪谷镇，是一名穿越者，没有系统、没有父母双亡、没有妹妹、没有未婚妻。",
            "　　虽然看起来一点也不像主角模板，但是我一点也不慌。",
            "　　我可是口袋妖怪一至七代全部云通关，熟知所有稀有精灵以及神兽在游戏中的捕捉地点，还看过漫画特别篇，读过某点大量精灵文的精灵真爱粉。",
            "　　脑子里有这么多奇奇怪怪的精灵知识，如果还不能成功的话，我还是老老实实回来继承家业好了。",
            "　　还有未来会拥有那些精灵伙伴呢？",
            "　　真是期待啊！",
            "　　冬树放下笔，拿起这张写满秘密的信纸，趴在二楼卧室的窗边，用打火机点燃。",
            "　　看着眼前跳动的火苗，不由自主的又想起了曾经那个精彩万分的世界。",
            "　　网站上还关注的沙雕UP主，不知道有没有新的沙雕视频？",
            "　　书架里追的小说，是完本了还是TJ了？",
            "　　最新的剑盾还没有云通关呢，现在只剩下的深深的遗憾。",
            "　　他并不知道，没有云通关剑盾，便是老天对他的恩赐。",
            "　　突然他倒吸一口凉气，发出一声长嘶嘶嘶嘶嘶嘶嘶嘶嘶！",
            "　　原来是火苗烧到了他的手指！",
            "　　他赶紧把只烧剩一点的信纸丢出窗外，随风舞动的火苗不只为他带来了热辣的吻，也带走了他的回忆。",
            "　　看着火苗在空中燃尽，他整理好思绪，默默盘算，‘再有一个月我就满十二岁了，终于可以向联盟申请成为训练家，拥有自己的精灵伙伴了。’",
            "　　‘这将是一个新的开始！我要在精灵世界留下自己的名字！’",
            "　　冬树爸爸中田一夫的那粗犷喊声，从楼下传到并打断了他的思绪。",
            "　　“冬树，伊布玩偶和正电拍拍负电拍拍的组合玩偶卖完了，有时间记得再做几个。”",
            "　　“知道啦，爸爸。”冬树停下胡思乱想，回应到。",
            "　　“慢慢做就行，那我先回店里了哦。”随后楼下传来了关门声。",
            "　　‘又是平凡且温馨的一天啊。’",
            "　　他感慨着起身，来到储物室里取出石膏粉还有精灵玩偶模具盒。",
            "　　反正闲着也是闲着，有在那里回忆的时间还不如做几个精灵玩偶呢，毕竟回忆不能当饭恰。",
            "　　在后院，冬树熟练的把和好的黏土塞进精灵玩偶模具盒固定好，放在后院的阴凉处阴干。",
            "　　只要等黏土阴干之后，稍作修整，给黏土玩偶刷上几遍水和石膏粉，等石膏外壳彻底成型，再把颜色一上就大功告成了。",
            "　　什么？你说为什么不做全石膏的？那得多少石膏啊？",
            "　　虽然石膏不值钱，但是有更便宜的黏土谁还做全石膏的呀？现在不是流行节能减排，不对...开源节流嘛！",
            "　　等待阴干的时候他也没闲着，而是把摇椅搬到树荫处，躺在上面，悠哉悠哉的摇晃着纳凉。",
            "　　不知不觉中便接受了美梦神的召唤，进入了梦乡。",
            "　　。。。。。。",
            "　　穿越成一个婴儿时冬树是拒绝的。",
          ], //小说内容
        },
      ], //小说目录及内容
      contentlists: [
        "　　溪谷镇坐落于丰缘地区的东北部，位于茵郁市和水静市之间。",
        "　　这里四处环山，风景雄奇壮美、朝飞暮卷、百卉含英。",
        "　　好吧，其实溪谷镇就是一个普通的大山里的小镇而已。",
        "　　不过溪谷镇附近有着丰缘地区著名的旅游景点，喷火驼山丘、懒人獭香蕉乐园、丰缘自然保护区。",
        "　　得益于这三个著名景点，经过溪谷镇补给的旅行训练家络绎不绝。",
        "　　这些旅行训练家不仅解决了大部分溪谷镇镇民的生活来源问题，还解决了溪谷镇附近大量的安全隐患，大大的减少了护林员们的工作量。",
        "　　旅行训练家们真是一群可爱的人呢。",
        "*",
        "*",
        "*",
        "　　午后的阳光穿过一栋二层小楼的窗子，照亮了一位少年。",
        "　　少年在信纸上写到。",
        "　　我叫冬树，今年十一岁，家住溪谷镇，是一名穿越者，没有系统、没有父母双亡、没有妹妹、没有未婚妻。",
        "　　虽然看起来一点也不像主角模板，但是我一点也不慌。",
        "　　我可是口袋妖怪一至七代全部云通关，熟知所有稀有精灵以及神兽在游戏中的捕捉地点，还看过漫画特别篇，读过某点大量精灵文的精灵真爱粉。",
        "　　脑子里有这么多奇奇怪怪的精灵知识，如果还不能成功的话，我还是老老实实回来继承家业好了。",
        "　　还有未来会拥有那些精灵伙伴呢？",
        "　　真是期待啊！",
        "　　冬树放下笔，拿起这张写满秘密的信纸，趴在二楼卧室的窗边，用打火机点燃。",
        "　　看着眼前跳动的火苗，不由自主的又想起了曾经那个精彩万分的世界。",
        "　　网站上还关注的沙雕UP主，不知道有没有新的沙雕视频？",
        "　　书架里追的小说，是完本了还是TJ了？",
        "　　最新的剑盾还没有云通关呢，现在只剩下的深深的遗憾。",
        "　　他并不知道，没有云通关剑盾，便是老天对他的恩赐。",
        "　　突然他倒吸一口凉气，发出一声长嘶嘶嘶嘶嘶嘶嘶嘶嘶！",
        "　　原来是火苗烧到了他的手指！",
        "　　他赶紧把只烧剩一点的信纸丢出窗外，随风舞动的火苗不只为他带来了热辣的吻，也带走了他的回忆。",
        "　　看着火苗在空中燃尽，他整理好思绪，默默盘算，‘再有一个月我就满十二岁了，终于可以向联盟申请成为训练家，拥有自己的精灵伙伴了。’",
        "　　‘这将是一个新的开始！我要在精灵世界留下自己的名字！’",
        "　　冬树爸爸中田一夫的那粗犷喊声，从楼下传到并打断了他的思绪。",
        "　　“冬树，伊布玩偶和正电拍拍负电拍拍的组合玩偶卖完了，有时间记得再做几个。”",
        "　　“知道啦，爸爸。”冬树停下胡思乱想，回应到。",
        "　　“慢慢做就行，那我先回店里了哦。”随后楼下传来了关门声。",
        "　　‘又是平凡且温馨的一天啊。’",
        "　　他感慨着起身，来到储物室里取出石膏粉还有精灵玩偶模具盒。",
        "　　反正闲着也是闲着，有在那里回忆的时间还不如做几个精灵玩偶呢，毕竟回忆不能当饭恰。",
        "　　在后院，冬树熟练的把和好的黏土塞进精灵玩偶模具盒固定好，放在后院的阴凉处阴干。",
        "　　只要等黏土阴干之后，稍作修整，给黏土玩偶刷上几遍水和石膏粉，等石膏外壳彻底成型，再把颜色一上就大功告成了。",
        "　　什么？你说为什么不做全石膏的？那得多少石膏啊？",
        "　　虽然石膏不值钱，但是有更便宜的黏土谁还做全石膏的呀？现在不是流行节能减排，不对...开源节流嘛！",
        "　　等待阴干的时候他也没闲着，而是把摇椅搬到树荫处，躺在上面，悠哉悠哉的摇晃着纳凉。",
        "　　不知不觉中便接受了美梦神的召唤，进入了梦乡。",
        "　　。。。。。。",
        "　　穿越成一个婴儿时冬树是拒绝的。",
        "　　当他确定了穿越到精灵世界的时候更是吓坏了。",
        "　　想想某点的黑暗精灵文，简直是完全没有平民的活路嘛。",
        "　　原本的日常虽然过得平凡且枯燥，但是好赖也算安稳。",
        "　　更何况在现实里唯唯诺诺，在网络上重拳出击，难道这还不香吗？",
        "　　如果被厉害的训练家战斗波及，很可能出现人在家中直接被AOE打成骨灰的情况。",
        "　　这特喵的还不如在原来的世界当个网络巨人算了。",
        "　　不过随着他渐渐长大开始接触外界信息之后，发现这个世界和他想象中的不太一样。",
        "　　最起码，他所接触到的训练家的实力并没有他想象中的那么恐怖。",
        "　　而且得益于镇长、君沙和联盟的法律的约束，溪谷镇内并没出现过训练家恶意伤人的情况。",
        "　　托父母双全的福，他的生活很是幸福美满，衣食无忧。",
        "　　总之，这个世界没那么好，也没那么坏。",
        "　　精灵的获得也没那么难。",
        "　　冬树就见过镇长亲自给那些父母在野生精灵冲击城镇中牺牲的适龄孤儿发放初始精灵蛋。",
        "　　虽然只是护林员们在溪谷镇附近收集到的例如蛇纹熊、橡实果之类的常见精灵蛋，但这也给了那些适龄孤儿一个希望。",
        "　　直接帮助适龄孤儿收服野生精灵？",
        "　　别想太多了。",
        "　　如果敢把这样收服来的野生精灵放出精灵球，那绝对是要出事的。",
        "　　精灵世界中当然也少不了各种各样的黑暗组织。",
        "　　不过黑暗组织很少出现在公众面前，一般都是自顾自的偷偷摸摸发大财，或者通过非法途径获得稀有精灵，这些都是普通人所接触不到的。",
        "　　至于溪谷镇的黑暗组织？",
        "　　抱歉，镇长就是溪谷镇这个团体的首领，只有溪谷镇，没有黑白之分，所以溪谷镇也格外的团结",
        "　　说起溪谷镇镇长来，那真是个大才。",
        "　　为了发展溪谷镇，经常委派未婚女青年们去给驻扎在溪谷镇外的护林员们派送一些生活物资、嘘寒问暖。",
        "　　一来二去，最后等到护林员转业的时候，就有一大半护林员最终选择了留在溪谷镇。",
        "　　冬树的爸爸就是其中的一员",
        "　　镇长还经常会去水静市找市长诉苦，厚着脸皮请求财政拨款，美其名曰，开展新村镇建设，打造美丽富强新村镇，为路过的训练家提供更优质的服务。",
        "　　现在水静市的市长只要一听说溪谷镇镇长又来了，脑瓜仁儿都疼。",
        "　　虽然每次要钱都没有成功过，不过鉴于溪谷镇的位置关系，联盟还是下调了溪谷镇的税收比例。",
        "　　至于这个主意是谁出的？",
        "　　当然是我们机灵可爱的小冬树了。",
        "　　有次镇长来冬树家找冬树爸爸喝酒，在酒桌上抱怨联盟税收的问题。",
        "　　冬树便仗着年纪小在旁随口说了一句，“我们镇的位置这么重要，为什么不能找联盟要些钱来发展镇子呢？”",
        "　　这话一下就点醒了镇长，从此镇长就开启了去水静市找市长的诉苦之路。",
        "　　*",
        "　　*",
        "　　*",
        "　　随着冬树渐渐长大，家中的开销也越来越大，但是家里的杂货店收入却没有增加。",
        "　　这使他不得不为了自己未来能顺利申请到御三家，想一个创收的好项目！",
        "　　抄歌？算了算了，现在精灵世界还是局域网时代，明星还是出专辑的，投歌还得写信，真的好麻烦。",
        "　　抄书？某点精灵文？算了算了，万一被切片研究就不好了。",
        "　　还是搞点稳妥的项目吧，生活不易，冬树叹气。",
        "　　最后他瞄准了精灵玩偶市场，完全自己动手，从购买石膏粉，一直到最后的上色，都在自家的后院完成。",
        "　　成本不到5精灵币的伊布玩偶最后在冬树爸爸的杂货铺里以500精灵币的高价成功出售。",
        "　　当时冬树的爸爸中田一夫都惊呆了！",
        "　　自此以后，中田家的杂货铺里腾出了一面货架专门摆放精灵玩偶，精灵玩偶也成了中田杂货铺的主要支柱产品。",
        "　　不过真正赚大钱的精灵玩偶却是雷公、炎帝、水君。",
        "　　藏在货架角落里祖传的精灵玩偶，传说中的精灵，配上古老而感人的故事，总有一些人愿意为此买单。",
        "　　典型的三年不开张，开张吃三年。",
        "　　为什么不是盖欧卡、固拉多、裂空座？",
        "　　冬树可不想以后被海洋队、熔岩队或是流星之民什么乱七八糟的家伙找上门来。",
      ], //小说内容
      workdetails: [], //小说详情
      chapterlists: [], //小说目录
      show: false, //上下弹出内容
      showright: false, //右边弹出内容
      chap: 1, //第几章节
      progre: false, //进度条显示
      value: 5, //进度
      setvalue: 20, //字体大小
      setup: false, //设置显示
      bgnum: 0, //默认背景
      jlnum: null, //记录背景号数
      showFoot: false, //底部下上章
      id: null, //书籍id
      empiricalvalue: 0, //经验值
      glres: null, //经验值定时器
      fas: 0, //判断是否购买
      currency: 10, //起点币
      vast:false,//加入书架
      coll: true, //判断是否收藏
      flse:true,//夜间模式
    };
  },
  mounted() {
    window.addEventListener("scroll", this.getScroll);
    this.plase();
  },
  methods: {
    //上下弹出内容
    showPopup() {
      this.show = !this.show;
      this.progre = false;
      this.setup = false;
      this.vast = false
    },
    // 右边弹出内容
    showRight() {
      this.showright = !this.showright;
      this.show = !this.show;
      this.progre = false;
      this.setup = false;
    },
    //跳转章节
    chapadd(index) {
      window.scrollTo(0, 0);
      this.showright = !this.showright;
      this.chap = index + 1;
      //判断是否需要购买章节
      if (this.chapterlists[index].fas == 1) {
        this.fas = 1;
      } else {
        this.fas = 0;
      }
    },
    //进度条显示
    showProgre() {
      this.progre = !this.progre;
      this.setup = false;
    },
    // 上一章
    add() {
      window.scrollTo(0, 0);
      this.chap -= 1;
      if (this.chap < 0) {
        this.chap = 0;
      }
      console.log(this.chap);
      this.values();
      //判断是否需要购买章节
      if (this.chapterlists[this.chap - 1].fas == 1) {
        this.fas = 1;
      } else {
        this.fas = 0;
      }
    },
    //下一章
    next() {
      window.scrollTo(0, 0);
      this.chap += 1;
      // console.log(this.chap);
      if (this.chap > this.chapterlists.length) {
        this.chap = this.chapterlists.length;
      }
      // this.value = 100/this.chapterlists.length*(this.chap+1);
      console.log(this.value);
      this.values();
      //判断是否需要购买章节
      if (this.chapterlists[this.chap - 1].fas == 1) {
        this.fas = 1;
      } else {
        this.fas = 0;
      }
    },
    //进度条
    values() {
      this.value = (this.chap / this.chapterlists.length) * 100;
    },
    //字体变小
    setadd() {
      this.setvalue -= 10;
      if (this.setvalue < 10) {
        this.setvalue = 10;
      }
    },
    // 字体变大
    setsnext() {
      this.setvalue += 10;
      if (this.setvalue > 100) {
        this.setvalue = 100;
      }
    },
    //设置显现
    showSetup() {
      this.setup = !this.setup;
      this.progre = false;
    },
    //夜间模式
    yejian() {
      //记录背景号数
      if (this.bgnum != 4) {
        this.jlnum = this.bgnum;
        this.bgnum = 4;
        this.flse = false;
      } else {
        this.bgnum = this.jlnum;
        this.flse = true;
      }
    },
    getScroll() {
      // console.log("滚动高度", window.pageYOffset);
      //   console.log(
      //     "距离顶部高度",
      //     this.$refs.obtain.getBoundingClientRect().top
      //   );

      // 获取页面高度
      // console.log(document.documentElement.clientHeight);
      let ffoheight = document.documentElement.clientHeight;
      // 获取滚动条上距离顶部高度
      //   let scrollheight = window.pageYOffset;
      //   console.log(scrollheight)
      // 获取页面总长度
      let scrollHeight = document.body.scrollHeight;
      // 获取滚动条上距离顶部高度(兼容)
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(scrollTop)

      //   console.log(document.body.scrollHeight);

      //   console.log(scrollheight);

      //下拉到底进行下一章
      if (ffoheight + scrollTop >= scrollHeight) {
        this.showFoot = true;

        // setTimeout(() => {
        //   this.chap += 1;
        // }, 300);
        // console.log(this.chap);
      }
      // console.log(this.chap)
    },
    //底部上一章
    addchap() {
      this.chap -= 1;
      if (this.chap < 0) {
        this.chap = 0;
        Toast("没有上一章了");
      } else {
        window.scrollTo(0, 0);
      }
      this.showFoot = false;
      //判断是否需要购买章节
      if (this.chapterlists[this.chap-1].fas == 1) {
        this.fas = 1
      }else{
        this.fas = 0
      }
    },
    //底部下一章
    nodechap() {
      this.chap += 1;
      if (this.chap > this.chapterlists.length) {
        this.chap = this.chapterlists.length;
        Toast("没有下一章了");
      } else {
        window.scrollTo(0, 0);
      }

      this.showFoot = false;
      //判断是否需要购买章节
      if (this.chapterlists[this.chap - 1].fas == 1) {
        this.fas = this.chapterlists[this.chap - 1].fas;
      }
    },
    //启动定时器
    plase() {
      this.glres = setTimeout(() => {
        this.empiricalvalue += parseInt(5);
      }, 5000);
    },
    //购买章节
    rech() {
      this.show = true;

      
      Dialog.confirm({
        title:  this.chapterlists[this.chap-1].text,
        message: "是否购买此章节",
      })
        .then(() => {
          //购买章节
          this.currency -=10;
          window.localStorage.setItem("currency",this.currency);
          //变成可看
          this.fas = 0;
          this.chapterlists[this.chap-1].fas=0;
          console.log(this.chapterlists)
          
        })
        .catch(() => {
        })
    },
    //收藏
    collections(){
        this.vast = !this.vast
    },

    //收藏
    collection() {
      this.coll = false; //收藏
      //判断如果收藏数组为空的话直接添加
      if (window.localStorage.getItem("bookshelf") == "") {
        this.adplst.push(this.id);
        window.localStorage.setItem("bookshelf", JSON.stringify(this.adplst)); //保存到内存中
      } else {
        //不为空的话先添加收藏数组的值，在添加要收藏的id,如果有相同的id的话则不添加
        this.adplst = JSON.parse(localStorage.getItem("bookshelf"));
        if (this.adplst.includes(this.id)) {
        return
        } else {
         this.adplst.push(this.id);
        window.localStorage.setItem("bookshelf", JSON.stringify(this.adplst)); //保存到内存中
        }
        
       
      }
    },
    //取消收藏
    collec() {
      this.coll = true; //取消收藏
      this.adplst = JSON.parse(localStorage.getItem("bookshelf")); //获取收藏数组
      this.adplst.forEach((v, i) => {
        if (this.id == v) {
          this.adplst.splice(i, 1); //删除收藏的数组
        }
      });
      window.localStorage.setItem("bookshelf", JSON.stringify(this.adplst)); //保存到内存中
    },
  },
  created() {
    //缓存中没有经验值的话，创建经验值
    if (!window.localStorage.getItem("empiricalvalue")) {
      window.localStorage.setItem("empiricalvalue", 0);
    } else {
      //缓存中有经验值的话，继承上一次的经验值
      this.empiricalvalue = parseInt(
        window.localStorage.getItem("empiricalvalue")
      );
    }
    this.id = this.$route.query.id; //书籍id
    this.chap = parseInt(this.$route.query.index); //选中的第几章节
    this.fas = this.$route.query.fas; //判断是否为需要购买的章节
    this.currency = window.localStorage.getItem("currency");
    console.log(this.fas);
    this.$axios.get("/static.json").then((res) => {
      let data = res.data;
      this.workdetails = data.workdetails[this.id]; //书籍详情
      this.chapterlists = data.workdetails[this.id].chapterlists; //全部目录
      this.contentlists = data.sublists[0].contentlists; //小说内容
      this.sublists = data.sublists; //小说内容及目录
      this.value = (this.chap / this.chapterlists.length) * 100; //进度条
    });
    //判断是否为已收藏
    if (!window.localStorage.getItem("bookshelf") == "") {
      this.adplst = JSON.parse(localStorage.getItem("bookshelf"));
      if (this.adplst.includes(this.id)) {
        this.coll = false;
      } else {
        this.coll = true;
      }
    }
  },
  watch: {
    value() {
      // this.value = (100/this.chapterlists.length)*(this.chap+1);
      this.chap = Math.ceil(this.value * (this.chapterlists.length / 100));
      if (this.chap < 1) {
        this.chap = 1;
      }
      //判断是否需要购买章节
      if (this.chapterlists[this.chap - 1].fas == 1) {
        this.fas = 1;
      } else {
        this.fas = 0;
      }
    },
    //字体大小变化
    setvalue() {
      this.setvalue = Math.ceil(this.setvalue);
    },
  },
  beforeDestroy() {
    console.log(this.empiricalvalue);
    clearInterval(this.glres);
    window.localStorage.setItem("empiricalvalue", this.empiricalvalue); //关闭时存储经验值
  },
};
</script>

<style lang="less">
.boxnove {
  .bg {
    width: 100vw;
    min-height: 100vh;
    background: url(https://qidian.gtimg.com/qdm/img/skin-default.e5975.jpg)
      no-repeat;
    background-size: 100% 100%;
    position: relative;
    .fication{
      width: 205;
      background: #13120F;
      color: white;
      font-size: 14px;
      position: fixed;
      z-index: 11;
      top:44px;
      right: 0px;
      padding: 10px 25px;
    }
    .popuptop {
      font-size: 16px;
      color: white;
      background: #000000e6;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        padding-left: 14px;
      }
      .right {
        padding-right: 14px;
      }
    }
    .pupupbottom {
      font-size: 16px;
      color: white;
      background: #000000e6;
      display: flex;
      align-items: center;
      .item {
        flex: 1;
        text-align: center;
        span {
          font-size: 25px;
          color: #c6c7c7;
        }
        div {
          font-size: 12px;
          color: #e0e0e0;
        }
      }
    }
    .popupright {
      width: 90%;
      background: white;
      .chapterlists {
        h3 {
          padding: 13px 0px;
          font-size: 14px;
          color: #ed424b;
          border-bottom: 1px solid #ed424b;
          padding-left: 12px;
        }
        div {
          padding: 8px 16px;
          color: #33373d;
          font-size: 15px;
          font-weight: 600;
        }
        .text {
          padding: 12px 16px 8px 16px;
          font-size: 13px;
          color: #969ba3;
          background-color: #f6f7f9;
        }
        ul {
          li {
            width: calc(100% - 16px);
            margin-left: 16px;
            padding: 12px 0px;
            font-size: 14px;
            color: #33373d;
            border-bottom: 1px solid #efefef;
            display: flex;
            justify-content: space-between;
            span {
              padding-right: 16px;
            }
          }
          li.con {
            color: #ed424b;
          }
        }
      }
    }
    .progress {
      width: 100%;
      background: #000000e6;
      height: 100px;
      position: fixed;
      bottom: 48px;
      color: white;

      .top {
        display: flex;
        font-size: 14px;
        padding: 12px 0px;
        justify-content: space-between;
        border-bottom: 1px solid #2d2d2d;
        .left,
        .right {
          text-align: center;
          width: 80px;
        }
        .center {
          text-align: center;
          flex: 1;
          overflow: hidden;
          height: 19px;
        }
      }
      .bottom {
        width: 90%;
        margin: 0 auto;
        padding: 20px 0px 16px 0px;
        .custom-button {
          width: 12px;
          height: 12px;
          background-color: #ed424b;
          border-radius: 50%;
        }
      }
    }
    .setups {
      width: 100%;
      background: #000000e6;
      height: 100px;
      position: fixed;
      bottom: 48px;
      color: white;
      .top {
        display: flex;
        font-size: 14px;
        padding: 12px 0px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #2d2d2d;
        .left,
        .right {
          text-align: center;
          width: 80px;
        }
        .custom-button {
          width: 12px;
          height: 12px;
          background-color: #ed424b;
          border-radius: 50%;
        }
      }
      .bottom {
        padding: 16px 0px 12px 0px;
        ul {
          display: flex;
          justify-content: space-around;
          li {
            width: 68px;
            height: 30px;
            background-color: #dacba6;
            border-radius: 3px;
            border: 1px solid #13120f;
            text-align: center;
            line-height: 30px;
            span {
              font-size: 16px;
              color: #e5887a;
            }
          }
          li.con {
            border: 1px solid #e5887a;
          }
        }
      }
    }
    .herave {
      width: calc(100% - 16px);
      padding: 16px 0px;
      padding-left: 16px;
      position: fixed;
      top: 0px;
      background: url(https://qidian.gtimg.com/qdm/img/skin-default.e5975.jpg);
      h1 {
        font-size: 12px;
        color: #00000066;
      }
    }
    .content {
      margin-top: 48px;
      width: calc(100% - 16px);
      padding-left: 16px;
      h3 {
        font-size: 27px;
        margin: 22px 0px;
        color: #000000d9;
      }
      p {
        font-size: 18px;
        color: #000000d9;
        margin: 1.8px 0px;
        line-height: 31px;
      }
      .footer {
        display: flex;
        justify-content: space-between;
        background: transparent;
        padding: 12px 0px;
        .right {
          padding-right: 16px;
        }
      }
    }
    .purchase {
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 100;
      .top {
        height: 40vh;
        background-color: transparent;
      }
      .bottom {
        height: 60vh;
        background: url(https://qidian.gtimg.com/qdm/img/skin-default.e5975.jpg);
        padding-top: 70px;
        .recharge {
          display: flex;
          flex-direction: column;
          align-items: center;
          .price {
            font-size: 13px;
            color: #000000d9;
          }
          .rech {
            margin: 10px 0px;
            background-color: #ed424b;
            font-size: 14px;
            padding: 8px 120px;
            color: white;
            border-radius: 20px;
          }
          .choosemore {
            color: #4284ed;
            font-size: 14px;
          }
        }
      }
    }

  }
  .conss {
    width: 100vw;
    overflow: hidden;
    height: 100vh;
    background: url(https://qidian.gtimg.com/qdm/img/skin-default.e5975.jpg)
      no-repeat;
    background-size: 100% 100%;
    position: relative;
    .popuptop {
      font-size: 16px;
      color: white;
      background: #000000e6;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        padding-left: 14px;
      }
      .right {
        padding-right: 14px;
      }
    }
    .pupupbottom {
      font-size: 16px;
      color: white;
      background: #000000e6;
      display: flex;
      align-items: center;
      .item {
        flex: 1;
        text-align: center;
        span {
          font-size: 25px;
          color: #c6c7c7;
        }
        div {
          font-size: 12px;
          color: #e0e0e0;
        }
      }
    }
    .popupright {
      width: 90%;
      background: white;
      .chapterlists {
        h3 {
          padding: 13px 0px;
          font-size: 14px;
          color: #ed424b;
          border-bottom: 1px solid #ed424b;
          padding-left: 12px;
        }
        div {
          padding: 8px 16px;
          color: #33373d;
          font-size: 15px;
          font-weight: 600;
        }
        .text {
          padding: 12px 16px 8px 16px;
          font-size: 13px;
          color: #969ba3;
          background-color: #f6f7f9;
        }
        ul {
          li {
            width: calc(100% - 16px);
            margin-left: 16px;
            padding: 12px 0px;
            font-size: 14px;
            color: #33373d;
            border-bottom: 1px solid #efefef;
            display: flex;
            justify-content: space-between;
            span {
              padding-right: 16px;
            }
          }
          li.con {
            color: #ed424b;
          }
        }
      }
    }
    .progress {
      width: 100%;
      background: #000000e6;
      height: 100px;
      position: fixed;
      bottom: 48px;
      color: white;
      z-index: 101;
      .top {
        display: flex;
        font-size: 14px;
        padding: 12px 0px;
        justify-content: space-between;
        border-bottom: 1px solid #2d2d2d;
        .left,
        .right {
          text-align: center;
          width: 80px;
        }
        .center {
          text-align: center;
          flex: 1;
          overflow: hidden;
          height: 19px;
        }
      }
      .bottom {
        width: 90%;
        margin: 0 auto;
        padding: 20px 0px 16px 0px;
        .custom-button {
          width: 12px;
          height: 12px;
          background-color: #ed424b;
          border-radius: 50%;
        }
      }
    }
    .setups {
      width: 100%;
      background: #000000e6;
      height: 100px;
      position: fixed;
      bottom: 48px;
      color: white;
      .top {
        display: flex;
        font-size: 14px;
        padding: 12px 0px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #2d2d2d;
        .left,
        .right {
          text-align: center;
          width: 80px;
        }
        .custom-button {
          width: 12px;
          height: 12px;
          background-color: #ed424b;
          border-radius: 50%;
        }
      }
      .bottom {
        padding: 16px 0px 12px 0px;
        ul {
          display: flex;
          justify-content: space-around;
          li {
            width: 68px;
            height: 30px;
            background-color: #dacba6;
            border-radius: 3px;
            border: 1px solid #13120f;
            text-align: center;
            line-height: 30px;
            span {
              font-size: 16px;
              color: #e5887a;
            }
          }
          li.con {
            border: 1px solid #e5887a;
          }
        }
      }
    }
    .herave {
      width: calc(100% - 16px);
      padding: 16px 0px;
      padding-left: 16px;
      position: fixed;
      top: 0px;
      background: url(https://qidian.gtimg.com/qdm/img/skin-default.e5975.jpg);
      h1 {
        font-size: 12px;
        color: #00000066;
      }
    }
    .content {
      margin-top: 48px;
      width: calc(100% - 16px);
      padding-left: 16px;
      h3 {
        font-size: 27px;
        margin: 22px 0px;
        color: #000000d9;
      }
      p {
        font-size: 18px;
        color: #000000d9;
        margin: 1.8px 0px;
        line-height: 31px;
      }
      .footer {
        display: flex;
        justify-content: space-between;
        background: transparent;
        padding: 12px 0px;
        .right {
          padding-right: 16px;
        }
      }
    }
    .purchase {
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 100;
      .top {
        height: 40vh;
        background-color: transparent;
      }
      .bottom {
        height: 60vh;
        background: url(https://qidian.gtimg.com/qdm/img/skin-default.e5975.jpg);
        padding-top: 70px;
        .recharge {
          display: flex;
          flex-direction: column;
          align-items: center;
          .price {
            font-size: 13px;
            color: #000000d9;
          }
          .rech {
            margin: 10px 0px;
            background-color: #ed424b;
            font-size: 14px;
            padding: 8px 120px;
            color: white;
            border-radius: 20px;
          }
          .choosemore {
            color: #4284ed;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>